@import "../../const";
@import "../../../../shared/color";

@headerAvatarSize: 60px;
@iconSize: 30px;
@headerIconColor: #6e6e6e;

.history-iframe {
	width: 520px;
	height: 600px;
}

@media screen and (max-height: 900px) {
	.history-iframe {
		width: 400px;
		height: 600px;
	}
}

.zr-app-header {
	height: @header-height;
	//box-shadow: 0 1px 1px rgba(242, 242, 238, 0.08);
	//box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 100;
	display: flex;
	
	
	.header-button {
		width: 60px;
		display: flex;
		font-size: 16px;
		color: @headerIconColor;
		height: 100%;
		align-items: center;
		justify-content: center;
		transition-duration: .4s;
		transition-property: background-color;
		cursor: pointer;
		
		.anticon {
			width: 36px;
			height: 36px;
			background-color: rgba(138, 138, 138, 0.15);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			transition: background-color .4s;
			
			&:hover {
				background-color: rgba(138, 138, 138, 0.3);
			}
		}
	}
	
	
	.header-button-box {
		flex-grow: 1;
		display: flex;
		flex-direction: row-reverse;
		padding-right: 20px;
		
		
		.header-language {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0px 10px 0px 14px;
			
			& > img {
				width: @iconSize;
				height: @iconSize;
				cursor: pointer;
			}
		}
		
		.zr-list-menu {
			display: none;
		}
	}
}

//菜单
.header-menu-item {
	font-size: 14px;
	display: flex;
	align-content: center;
	align-items: center;
	
	//text-rendering: optimizeLegibility;
	//-webkit-font-smoothing: antialiased;
	
	& > i {
		font-size: 14px;
		margin-right: 10px;
		color: @headerIconColor;
	}
}

.header-language-item {
	display: flex;
	align-content: center;
	align-items: center;
	
	& > img {
		margin-right: 10px;
		width: 26px;
	}
}

.header-menu {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.user-menu {
	width: 250px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	border-width: 1px;
	border-style: solid;
	border-color: #e4e4e4;
	
	ul {
		border-right: none;
	}
	
	.ant-divider-horizontal {
		margin: 0px;
	}
	
	.user-info {
		padding: 18px 4px 18px 10px;
		display: flex;
		flex-direction: row;
		color: #7f7f7f;
		justify-content: flex-start;
		align-items: center;
		
		h3 {
			padding: 0;
			margin: 0;
			font-size: 20px;
		}
		
		.role-names {
			font-weight: normal;
			font-size: 14px;
			display: flex;
			flex-direction: row;
			
			& > div {
				margin-right: 4px;
			}
		}
		
		.header-user-avatar {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			margin-right: 16px;
			background-color: rgba(0, 0, 0, 0.11);
			overflow: hidden;
			
			img {
				width: 60px;
			}
			
			&.header-big {
				width: @headerAvatarSize * 2;
				height: @headerAvatarSize * 2;
				
				img {
					width: @headerAvatarSize * 2;
					height: @headerAvatarSize * 2;
				}
				
			}
		}
	}
}

.level-up-btn {
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 12px;
}